<template>
  <view>
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="true"
          :title-bold="true"
          :is-fixed="false"
          title="公告"
          title-color="#000000"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->
    <!-- pages/news_list/news_list.wxml -->
    <view class="news_list">
      <view class="contain">
        <view class="search-news">
          <u-search
              placeholder="查询"
              v-model="keyword"
              bg-color="#ffffff"
              :show-action="true"
              :action-text="'搜索'"
              :action-style="{
                color: '#ffffff',
                fontSize: '28rpx',
              }"
              @search="handleSearch"
              @custom="handleSearch"
          ></u-search>
        </view>
        <view class="main">
          <view class="article-list bg-white">
            <view v-for="(item, index) in newsList" :key="index" :data-id="item.id" class="article-item "
                  @tap="goPage">
              <view>
                <view class="info">
                  <view class="title lg line2 mb20"><image src="/static/images/icon_article.png" class="icon-article"></image>{{ item.title }}</view>
                  <view class="lighter line2">
                    <view>{{ item.synopsis }}</view>
                  </view>
                </view>

              </view>
              <view class="row-between mt20">
                <view class="xs muted article-time"><u-icon name="clock" size="26" style="margin-right: 5rpx"></u-icon> {{ item.create_time }}</view>
<!--                <view class="row">-->
<!--                  &lt;!&ndash; <image class="icon-sm" src="/static/images/icon_see.png"></image> &ndash;&gt;-->
<!--&lt;!&ndash;                  <view class="ml10 xs muted">{{ item.visit }}人浏览</view>&ndash;&gt;-->
<!--                </view>-->
              </view>
            </view>
          </view>
          <loading-footer :status="status" slotEmpty>
            <view slot="empty" class="column-center" style="padding-top: 100rpx">
              <image class="img-null" src="/static/images/news_null.png"></image>
              <text class="nr muted">暂无数据～</text>
            </view>
          </loading-footer>
        </view>
      </view>
    </view>
    <!-- <loading-view v-if="showLoading"></loading-view> -->
  </view>
</template>

<script>

import {getCategoryList, getArticleList} from '@/api/new';
import {loadingType} from '@/utils/type';
import {loadingFun} from '@/utils/tools'

export default {
  data() {
    return {
      keyword: '',
      active: 0,
      showLoading: true,
      categoryList: [],
      newsList: [],
      page: 1,
      status: loadingType.LOADING,
      bannerList: [],
      type: 0,
      showAd: false
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    //分类id
    this.id = options.id; //type存在则为帮助中心

    this.type = options.type || '';

    if (this.type) {
      uni.setNavigationBarTitle({
        title: '帮助中心'
      });
    } else {
      uni.setNavigationBarTitle({
        title: '公告'
      });
    }
    this.showAd = true
    this.getCategoryListFun();
  },

  onReachBottom: function () {
    this.getArticleListFun();
  },


  methods: {
    // 添加搜索处理函数
    handleSearch() {
      this.page = 1;
      this.newsList = [];
      this.status = loadingType.LOADING;
      this.getArticleListFun();
    },
    changeActive(e) {
      this.active = e;
      this.page = 1;
      this.newsList = [];
      this.status = loadingType.LOADING
      setTimeout(() => {
        this.getArticleListFun();
      }, 100);
    },

    getCategoryListFun() {
      getCategoryList({
        type: this.type
      }).then(res => {
        if (res.code == 1) {
          this.categoryList = res.data
          console.log(this.categoryList)
          this.getArticleListFun();
        }
      });
    },

    getArticleListFun() {
      let {
        active,
        page,
        newsList,
        status,
        keyword
      } = this;

      // active是选中的分类索引，索引0是全部，索引1开始才是的分类列表的数据
      let id = active ? this.categoryList[active - 1].id : '';

      loadingFun(getArticleList, page, newsList, status, {
        type: this.type,
        id,
        page_no: page,
        keyword: keyword // 添加关键词参数
      }).then(res => {
        if (res) {
          this.page = res.page;
          this.newsList = res.dataList
          this.status = res.status
        }
      })
    },

    goPage(e) {
      let {
        id
      } = e.currentTarget.dataset;
      uni.navigateTo({
        url: `/pages/news_details/news_details?id=${id}&type=${this.type}`
      });
    }

  }
};
</script>
<style lang="scss">
page {
  background-color: #f5f9ff;

  .search-news {
    margin: 20rpx;
  }

  /* pages/information/information.wxss */
  .news_list {
    .banner {

    }

    .main {
      margin: 0 20rpx;
      .article-list {
        padding-top: 10rpx;
        border-radius: 16rpx;
        .article-item {
          padding: 20rpx;
          border-bottom: var(--border);
          align-items: flex-start;

          .info {
            flex: 1;
          }

          .img {
            width: 240rpx;
            height: 180rpx;
            flex: none;
          }
        }

        &:last-of-type {
          border: none;
        }
      }
    }

    .footer {
      padding: 30rpx 0;
    }
  }
  .van-tabs .van-tab--active {
    color: #333;
  }
  .u-action-active {
    position: absolute;
    right: 15px; /* 根据需要调整位置 */

    z-index: 1; /* 确保按钮在输入框之上 */
    background-color: #0066ff;
    color: #ffffff !important;
    border-radius: 32rpx;
    height: 50rpx;
    line-height: 50rpx;
    width: 100rpx !important;
  }

  .news_list .van-tab {
    width: 25%;
    flex: none;
  }
  .title {
    display: flex;
    align-items: flex-start; // 顶部对齐

    .icon-article {
      width: 34rpx;
      height: 34rpx;
      margin-right: 10rpx;
      flex-shrink: 0;
      margin-top: 4rpx; // 微调垂直位置以匹配文字
    }
  }
  .article-time{
    font-size: 24rpx;
    color: #323232;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;

  }
}
</style>